<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/register.css">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/api.js"></script>
    
</head>
<body>
    <div class="boss">
        <div>
            <img src="../images/png/milogo.png">
        </div>
        <h2>注册小米账号</h2>
        <form onsubmit="return false">
            <p>
                <label for="">用户名:</label>
                <input type="text" id="user">
                <span id="user_span"></span>
            </p>
            <p>
                <label for="">密&emsp;码:</label>
                <input type="text" id="pwd">
                <span id="pwd_span"></span>
            </p>
            <p>
                <label for="">手机号:</label>
                <input type="text" id="phone">
                <span id="phone_span"></span>
            </p>
            <p>
                <label for="">邮&emsp;箱:</label>
                <input type="text" id="email">
                <span id="email_span"></span>
            </p>
            <p>
                <input id="btn" type="submit" disabled value="立即注册">
            </p>
        </form>
        <p class="xy">
            已阅读并同意：小米<span>用户协议</span>和<span>隐私政策</span>
        </p>
    </div>
    <table align="center">
        <tr>
            <td>简体</td>
            <td>|</td>
            <td>繁体</td>
            <td>|</td>
            <td>English</td>
            <td>|</td>
            <td>常见问题</td>
            
        </tr>
    </table>
    <p class="bq">
        小米公司版权所有-京ICP备10046444-<img src="../images/png/ghs.png" />京公网安备11010802020134号-京ICP证110507号
    </p>
</body>
<script>
    var userInp = document.getElementById("user");
    var userSpan = document.getElementById("user_span");
    var pwdInp = document.getElementById("pwd");
    var pwdSpan = document.getElementById("pwd_span");
    var phoneInp = document.getElementById("phone");
    var phoneSpan = document.getElementById("phone_span");
    var emailInp = document.getElementById("email");
    var emailSpan = document.getElementById("email_span");
    var btn = document.getElementById("btn");

    var userFlag = false;
    var pwdFlag = false;
    var phoneFlag = false;
    var emailFlag = false;
    userInp.onchange = function () {
        userFlag = false;
        var user = userInp.value.trim();
        var reg = /^[a-zA-Z_$][\w$]{5,11}$/;

        if (reg.test(user)) {
            isExistUser({ user }).then(function (result) {
                if (result.status) {
                    userSpan.textContent = "√";
                    userSpan.className = "rt";
                    userFlag = true;
                    isEnabled();

                } else {
                    userSpan.textContent = "用户名已被注册";
                    userSpan.className = "err";
                }
            }).catch(err => {
                throw err;
            })
        } else {
            userSpan.textContent = "用户名格式不正确";
            userSpan.className = "err";
            isEnabled();
        }
    }


    pwdInp.onchange = function () {
        pwdFlag = false;
        var pwd = pwdInp.value;
        var regpwd = /^[0-9a-zA-Z_$]{6,12}$/;
        if (regpwd.test(pwd) == true) {
            pwdFlag = true;
            var reg1 = /[0-9]/;
            var reg2 = /[a-z]/;
            var reg3 = /[A-Z]/;
            var reg4 = /[_|$]/;
            var flag = null;
            flag = reg1.test(pwd) + reg2.test(pwd) + reg3.test(pwd) + reg4.test(pwd);
            pwdSpan.innerText = "√ 密码强度为：" + flag + "级";
            pwdSpan.className = "rt";
            pwdSpan.style.fontSize = "12px";

        } else {
            pwdSpan.innerText = "密码格式不正确";
            pwdSpan.className = "err";
            pwdSpan.style.fontSize = "12px";
        }
        isEnabled();

    }
    phoneInp.onchange = function () {
        phoneFlag = false;
        var phone = phoneInp.value.trim();
        var reg = /^1[3-9]\d{9}$/;

        if (reg.test(phone)) {
            isExistPhone({ phone }).then(function (result) {
                if (result.status) {
                    phoneSpan.textContent = "√";
                    phoneSpan.className = "rt";
                    phoneFlag = true;
                    isEnabled();

                } else {
                    phoneSpan.textContent = "用户名已被注册";
                    phoneSpan.className = "err";
                }
            }).catch(err => {
                throw err;
            })
        } else {
            phoneSpan.textContent = "请输入正确的手机号";
            phoneSpan.className = "err";
            phoneSpan.style.fontSize = "12px";
            isEnabled();
        }
       
    }

    emailInp.onchange = function () {
        emailFlag = false;
        var email = emailInp.value.trim();
        var reg = /^\w+@\w+\.com$/;

        if (reg.test(email)) {
            isExistEmail({ email }).then(function (result) {
                if (result.status) {
                    emailSpan.textContent = "√";
                    emailSpan.className = "rt";
                    emailFlag = true;
                    isEnabled();

                } else {
                    emailSpan.textContent = "用户名已被注册";
                    emailSpan.className = "err";
                }
            }).catch(err => {
                throw err;
            })
        } else {
            emailSpan.textContent = "请输入正确的邮箱";
            emailSpan.className = "err";
            isEnabled();
        }
    }

   
   
    function isEnabled() {
        // console.log(userFlag,pwdFlag,phoneFlag,emailFlag);
        if (userFlag && pwdFlag && phoneFlag && emailFlag) {
            btn.disabled = false;
            var user = userInp.value;
            var pwd = pwdInp.value;
            var phone = phoneInp.value;
            var email = emailInp.value;
            btn.onclick = function(){ register({ user,pwd,phone,email }).then(function (result) {
                if (result.status) {
                    alert(result.detail);
                    location.href = "login.html";
                } else {
                    alert(result.detail);
                }
                }).catch(err => {
                    throw err;
                })};
            } else {
                btn.onclick = null;
                btn.disabled = true;
            }
    }

    function setCookie(key, val, day, path = "/") {
        if (day) {  //如果设置了过期时间
            var date = new Date();  //北京时间(世界时 + 8h)
            date.setDate(date.getDate() + day);
            document.cookie = key + "=" + val + ";expires=" + date.toUTCString() + ";path=" + path;
        } else {
            document.cookie = key + "=" + val + ";path=" + path;
        }
    }


</script>

</html>